<template>
  <div class="header-page flex space-between">
    <img class="header-logo" src="@/assets/images/logo.png" />

    <el-input
      v-model="searchValue"
      class="input-box"
      :placeholder="isLogin ? '搜索小红书' : '登录探索更多内容'"
      @change="searchChange"
    >
      <template #suffix>
        <el-icon class="el-input__icon"><search /></el-icon>
      </template>
    </el-input>

    <div class="flex">
      <el-dropdown trigger="hover">
        <span class="right-span flex">创作中心</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>创作服务</el-dropdown-item>
            <el-dropdown-item>直播管理</el-dropdown-item>
            <el-dropdown-item>电脑直播助手</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-dropdown trigger="hover">
        <span class="right-span flex">业务合作</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>专业号</el-dropdown-item>
            <el-dropdown-item>推广合作</el-dropdown-item>
            <el-dropdown-item>蒲公英</el-dropdown-item>
            <el-dropdown-item>商家入驻</el-dropdown-item>
            <el-dropdown-item>MCN入驻</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import isLogin from "@/utils/isLogin.js";
import emmiter from "@/utils/event-bus.js";

const searchValue = ref("");

const searchChange = () => {
  if (!isLogin) {
    // 弹出登录框
    emmiter.emit("loginShow", true);
  }
};
</script>

<style lang="scss" scoped>
.header-page {
  height: 100%;
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;

  .header-logo {
    height: 72px;
    cursor: pointer;
  }

  .input-box {
    position: fixed;
    left: 50%;
    transform: translate(-50%);
    height: 40px;
    width: calc(32px + calc(100vw - 7 * 32px) / 6 * 2);
    font-size: 16px;
    color: var(--color-primary-label);
    caret-color: var(--color-red);
  }

  .right-span {
    outline: none;
    height: 40px;
    text-align: center;
    align-items: center;
    margin-right: 5px;
    padding: 16px;
    font-size: 16px;
    padding: 0 16px;
    color: var(--color-secondary-label);
  }

  .right-span:hover {
    outline: none;
    cursor: pointer;
    border-radius: 999px;
    background-color: var(--color-active-background);
  }
}

::v-deep(.el-input) {
  --el-input-border-color: transparent;
  --el-input-focus-border-color: transparent;
  --el-input-hover-border-color: transparent;
}
::v-deep(.el-input__wrapper) {
  border-radius: 999px;
  background: var(--color-active-background);
}

::v-deep(.el-input__inner) {
  color: var(--color-primary-label);
}
</style>